<template>
  <div>
    <h1>我的页面</h1>
    <div class="bor">
      <!-- query传参方式 -->
      <router-link to="/MyHome">主页</router-link><br>
      <router-link to="/MyMovie">电影</router-link>
      <p>
        <router-link to="/MyMovie?a=1&b=10" >电影:喜洋洋</router-link> <br>
        <button @click="fn">点击</button>
      </p>
      </div>
      <div class="bor">
        <!-- params传参方式 -->
      <router-link to="/MyNews/123" >新闻1</router-link><br>
      <router-link to="/MyNews/456" >新闻2</router-link><br>
      <router-link to="/MyNews/789" >新闻3</router-link><br>
      </div>
     <router-view></router-view>
  </div>
</template>

<script>
import MyHome from './views/MyHome.vue'
import MyMovie from './views/MyMovie.vue'
import MyNews from './views/MyNews.vue'
export default {
  data() {
    return {
      
    }
  },
  methods:{
    fn(){
      // this.$router.push('/MyMovie')
      // this.$router.push({path:'/MyMovie'})
      // 跳转并query传参-方式2
//     this.$router.push({
//       path: "/MyMovie",
//       query: {
//           "a":2,
//           "b":3
//     }
// })
// 跳转并params传参-方式1
// this.$router.push("/MyNews/100/值2")
// 跳转并params传参-方式2
this.$router.push({
    name: "news",
    params: {
        "id":1000,
    }
})

    }
  },
  mounted(){
    window.onhashchange = () => {
      // console.log(window.location.hash);
      const { hash } = window.location
      if(hash==='#/index'){
        this.comName = 'MyHome'
      }else if(hash==='#/movie'){
        this.comName = 'MyMovie'
      }
    }
  },
  data() {
    return {
      comName:'MyHome'
    }
  },
  components:{
    MyHome,
    MyMovie,
    MyNews
  }
}
</script>

<style lang="less" scoped>
.router-link-exact-active{
  color: red;
}
  .bor{
    border: 1px solid #000;
    margin-top: 10px ;
  }
</style>